<template>
    <div class="nav_header">
        <div>
            <el-menu theme="dark" :default-active="pageindex" mode="horizontal">
                <el-menu-item label="BALANCE" name="balance" index="2" @click="changePage(2)"><a href="/#/balance">BALANCE</a></el-menu-item>
                <el-menu-item label="PROFIT" name="profit" index="3" @click="changePage(3)"><a href="/#/profit">PROFIT</a></el-menu-item>
                <el-menu-item label="UNLOCK" name="unlock" index="1" @click="changePage(1)"><a href="/#/unlock">UNLOCK</a></el-menu-item>
                <el-menu-item label="NOTICE" name="notice" index="4" @click="changePage(4)"><a href="/#/notice">NOTICE</a></el-menu-item>
            </el-menu>
        </div>
        <span class="logout-wrap">
            <span @click="logout()">退出登录</span>
        </span>
    </div>
</template>
<script>
    export default {
        name: 'topnav',
        data() {
            return {
                pagename: ''
            }
        },
        methods: {
            changePage: function(pagen) {
                if(pagen == 1) {
                    window.location.href = "/#/unlock";
                } else if(pagen == 2) {
                    window.location.href = "/#/balance";
                } else if(pagen == 3) {
                    window.location.href = "/#/profit";
                } else if(pagen == 4) {
                    window.location.href = "/#/notice";
                } else {
                    window.location.href = "/#/balance";
                }
            },
            logout: function() {
                if(this.api.getCookie("sid")) {
                    this.api.clearCookie(["sid"]);
                    window.location.href = "/#/login";
                }
            }
        },
        props: ['pageindex']
    }
</script>
<style>
    .nav_header {
        position: relative;
    }
    .nav_header .logout-wrap {
        position: absolute;
        top: 18px;
        right: 30px;
        color: #ffffff;
        cursor: pointer;
    }
</style>